<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            font-family: "隶书";
        }

        #container{
            margin: 0px auto;
            width: 407px;
            padding: 0px;
            position: relative;
        }
        ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
            float: left;
            width: 600px;
        }

        ul li {
            margin: 5px 0px;
            float: left;
        }

        #news {
            border: solid 1px #ccc;
            width:550px;
            padding: 8px 20px 30px 20px;
            float: left;
        }

        .title {
            float: left;
            width: 100%;
            border-bottom: solid 1px #ccc;
        }

        .title span {
            float: left;
            width: 66px;
            border: solid 0px red;
            padding: 8px;
            margin-right: 8px;
            font-size: 16px;
        }

        .title span:hover {
            float: left;
            width: 66px;
            border: solid 0px red;
            padding: 8px;
            margin-right: 8px;
            background-color: cornflowerblue;
            color: white;
        }

        .content {
            width: 357px;
            border: solid 0px red;
            margin-top: 20px;
            float: left;
        }

        .content span {
            float: left;
            font-size: 13px;
        }

        .content span:nth-child(1) {
            width: 32px;
            color: cornflowerblue;
        }

        .content span:nth-child(2) {
            width: 268px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .content span:nth-child(3) {
            color: #ccc;
            width: 57px;
        }

        .clearL1 {
            clear: left;
        }

    </style>
    <script>
        function myfunction1(){
            document.getElementById("iframe1").src='file1.html'
        }
        function myfunction2(){
            document.getElementById("iframe1").src='file2.html'
        }
        function myfunction3(){
            document.getElementById("iframe1").src='file3.html'
        }
    </script>
</head>
<body>
<div id="container">
    <div id="news">
        <div class="title">
            <span onmousemove="myfunction1()">热点排行</span>
            <span onmousemove="myfunction2()">评论排行</span>
            <span onmousemove="myfunction3()">图片排行</span>
        </div>
        <div class="clearL1"></div>
        <div class="content">
           <iframe src="file1.html" id="iframe1" name="ifr" width="500px" height="200px" ></iframe>

        </div>
    </div>
</div>
</body>
</html>